<template>
    <div class="novel" :style="{ color, backgroundColor }">
        <div class="topf">
            <div class="fanhui" @click="goBack">
                <van-icon name="revoke" />
            </div>
            <div class="control" @click="chengCW">
                <van-icon name="setting-o" />
            </div>
        </div>
        <div class="neir" v-html="neir" :style="{fontSize:fs}"></div>
        <div class="bottomf" :style="{ width: CW, backgroundColor }">
            <div class="bottomf-one" @click="chengCW">
                <van-icon name="cross" />
            </div>
            <div class="fonSize">
                <p>字体大小:</p>
                <div class="size">
                    <button @click="fa">超大</button>
                    <button @click="fb">大</button>
                    <button @click="fc">中</button>
                    <button @click="fd">小</button>
                    <button @click="fe">超小</button>
                </div>
            </div>
            <div class="background">
                <p>背景:</p>
                <ul>
                    <li @click="chengCLa" class="active aa"></li>
                    <li @click="chengCLb" class="bb"></li>
                    <li @click="chengCLc" class="cc"></li>
                    <li @click="chengCLd" class="dd"></li>
                </ul>
            </div>
            <div class="eyes">
                <p>护眼模式:</p>
                <button @click="chengBG">
                    <van-icon name="eye-o" />
                </button>
            </div>
            <div class="brigh">
                <p>亮度:</p>
            </div>
        </div>
    </div>
</template>
<script>
// 导入http
import http from '../api/request.js'

export default {
    data() {
        return {
            // 字体颜色
            // white
            color: 'black',
            // 背景颜色
            // black
            backgroundColor: '#e0d9c6',
            // 侧边栏宽度
            CW: '0px',
            // 书籍id
            sid: '',
            // 章节id
            cid: '',
            // 小说内容
            neir: '',
            // 组件的
            value: 50,
            // 字体大小
            fs:'25px'
        }
    },
    methods: {
        // 编写小说内容方法
        async conData() {
            await http.get(`reader/book/content.json?source_uuid=${this.sid}&content_uuid=${this.cid}`)
                .then(
                    content => {
                        this.neir = content.data.content;
                    }
                )
                .catch(
                    err => {
                        console.log("卧槽,不是吧这样失败 想死", err);

                    }
                )
        },
        goBack() {
            this.$router.go(-1);
        },
        chengCW() {
            this.CW = this.CW == '0px' ? '200px' : '0px';
        },
        // 改变护眼模式
        chengBG() {
            this.color = this.color == 'black' ? 'white' : 'black';
            if (this.color == 'black') {
                this.backgroundColor = '#e0d9c6'
            }
            else if (this.color == 'white') {
                this.backgroundColor = 'black';
            }
        },
        // 背景色
        chengCLa() {
            this.color = 'black';
            this.backgroundColor = '#f6f6f6';
        },
        chengCLb() {
            this.color = 'black';
            this.backgroundColor = '#e0d9c6';
        },
        chengCLc() {
            this.color = 'black';
            this.backgroundColor = '#d7e3cb';
        },
        chengCLd() {
            this.color = 'black';
            this.backgroundColor = '#ced8e4';
        },
        // 字体大小
        fa(){
            this.fs='35px'
        },
        fb(){
            this.fs='30px'
        },
        fc(){
            this.fs='25px'
        },
        fd(){
            this.fs='20px'
        },
        fe(){
            this.fs='14px'
        }
    },
    watch: {
        $route: {
            immediate: true,
            handler($route) {
                this.sid = $route.query.sid;
                this.cid = $route.query.cid;
            }
        }
    },
    created() {
        this.conData();
    }
}
</script>

<style lang="less">
.novel {
    padding-top: 80px;
    transition: all 0.5s ease;
    min-height: 667px;
    .bottomf {
        height: 100%;
        position: fixed;
        top: 0px;
        right: -20px;
        transition: width 0.5s ease;
        padding: 10px;
        .background {
            p {
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 10px;
            }

            ul {
                display: flex;

                li {
                    margin-left: 5px;
                    height: 35px;
                    width: 35px;
                    border: 1px solid;
                    border-radius: 50%;
                    margin-bottom: 10px;
                }

                .active {
                    border: 1px solid;
                }

                .aa {
                    background-color: #f6f6f6;
                }

                .bb {
                    background-color: #e0d9c6;
                }

                .cc {
                    background-color: #d7e3cb;
                }

                .dd {
                    background-color: #ced8e4;
                }
            }
        }

        .brigh{
            p{
                font-weight: bold;
                font-size: 30px;
            }
        }


        .eyes {
            P {
                font-weight: bold;
                font-size: 30px;
            }

            button {
                padding: 0px 15px;
                font-size: 40px;
            }
        }

        .bottomf-one {
            font-size: 30px;
        }

        .fonSize {
            font-weight: bold;
            padding: 5px;

            p {
                margin-bottom: 5px;
            }

            .size {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                font-weight: normal;

                button {
                    font-size: 20px;
                    margin-bottom: 10px;
                    border-radius: 15px;
                    border: 2px solid #ccc;
                    padding: 5px 10px;
                    margin-right: 5px;
                }
            }
        }
    }

    .topf {
        background-color: inherit;
        position: fixed;
        top: 0;
        width: 100%;
        display: flex;
        padding: 15px 30px;
        justify-content: space-between;
        align-items: center;
        font-size: 35px;

        .fanhui {}

        .bottomf {}
    }

    .neir {
        padding: 0px 10px;
        .g-book {
            .m-mb {
                .m-content {
                    h1 {

                        span {
                            position: fixed;
                            font-size: 20px;
                            top: 8px;
                            left: 50%;
                            transform: translateX(-50%);
                        }
                    }

                    p {
                        text-indent: 2ch;
                        line-height: 35px;
                        margin-bottom: 15px
                    }
                }
            }
        }
    }
}
</style>